<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>z-index 层级</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			line-height: 1.5;
		}		
		.box{
			width: 150px;
			height: 150px;
			background-color: red;
			padding: 10px;
			margin: 10px 20px;
			color: #fff;
		}
		.box-a{
			position: relative;
			z-index: 2;
		}
		.box-b{
			background-color: green;
			margin-top: -80px;
			position: relative;
		}
		.box-c{
			background-color: blue;
			width: 80px;
			height: 80px;
			position: relative;
			z-index: 3;
			/*margin-top: -60px;*/
		}
		.box-d{
			background: orange;
			margin-top: -80px;
		}
	</style>
</head>
<body>
	<div class="box box-a">A</div>
	<div class="box box-b">
		B
		<div class="box box-c">C</div>
	</div>
	<div class="box box-d">D</div>
</body>
</html>

